<!DOCTYPE html>
<html lang=zh>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
    <meta name="description" content="HTML面试题 如何理解HTML语义化 块状元素 &amp; 内联元素   CSS面试题 盒模型宽度计算 margin纵向重叠 margin负值的问题 BFC的理解和应用 float布局 圣杯布局 双飞翼布局 手写clearfix   flex布局 常用语法 flex实现一个三点的色子   css定位 absolute和relative定位 居中对齐方式   css-图文样式 css-响">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试复习">
<meta property="og:url" content="https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/index.html">
<meta property="og:site_name" content="柯里的语法糖">
<meta property="og:description" content="HTML面试题 如何理解HTML语义化 块状元素 &amp; 内联元素   CSS面试题 盒模型宽度计算 margin纵向重叠 margin负值的问题 BFC的理解和应用 float布局 圣杯布局 双飞翼布局 手写clearfix   flex布局 常用语法 flex实现一个三点的色子   css定位 absolute和relative定位 居中对齐方式   css-图文样式 css-响">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-03-16T07:43:07.529Z">
<meta property="article:modified_time" content="2022-03-16T07:43:07.529Z">
<meta property="article:author" content="柯里的语法糖">
<meta property="article:tag" content="面试">
<meta name="twitter:card" content="summary">
    
    
      
        
          <link rel="shortcut icon" href="https://codertzm.oss-cn-chengdu.aliyuncs.com/favicon.ico">
        
      
      
        
          <link rel="icon" type="image/png" href="https://codertzm.oss-cn-chengdu.aliyuncs.com/favicon.ico" sizes="192x192">
        
      
      
        
          <link rel="apple-touch-icon" sizes="180x180" href="https://codertzm.oss-cn-chengdu.aliyuncs.com/favicon.ico">
        
      
    
    <!-- title -->
    <title>前端面试复习</title>
    <!-- styles -->
    
<link rel="stylesheet" href="/css/style.css">

    <!-- persian styles -->
    
    <!-- rss -->
    
    
	<!-- mathjax -->
	
<meta name="generator" content="Hexo 6.0.0"></head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#" aria-label="Menu"><i class="fas fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#" aria-label="Menu"><i class="fas fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" aria-label="Top" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fas fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
        <!--
       --><li><a href="/">首页</a></li><!--
     --><!--
       --><li><a href="/tags/">标签</a></li><!--
     --><!--
       --><li><a href="/categories/">分类</a></li><!--
     --><!--
       --><li><a href="/archives/">归档</a></li><!--
     --><!--
       --><li><a target="_blank" rel="noopener" href="http://github.com/twitzz">项目</a></li><!--
     --><!--
       --><li><a href="/about/">关于</a></li><!--
     --><!--
       --><li><a href="/search/">搜索</a></li><!--
     -->
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" aria-label="上一篇" href="/2022/03/19/algorithm/binaryTree/"><i class="fas fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" aria-label="下一篇" href="/2022/03/12/nodejs/npm%E5%8C%85%E7%AE%A1%E7%90%86/"><i class="fas fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" aria-label="返回顶部" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" aria-label="分享文章" href="#"><i class="fas fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">上一篇</span>
      <span id="i-next" class="info" style="display:none;">下一篇</span>
      <span id="i-top" class="info" style="display:none;">返回顶部</span>
      <span id="i-share" class="info" style="display:none;">分享文章</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&text=前端面试复习"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&title=前端面试复习"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&is_video=false&description=前端面试复习"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=前端面试复习&body=Check out this article: https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/"><i class="fas fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&title=前端面试复习"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&title=前端面试复习"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&title=前端面试复习"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&title=前端面试复习"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&name=前端面试复习&description="><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&t=前端面试复习"><i class="fab fa-hacker-news " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E9%9D%A2%E8%AF%95%E9%A2%98"><span class="toc-number">1.</span> <span class="toc-text">HTML面试题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3HTML%E8%AF%AD%E4%B9%89%E5%8C%96"><span class="toc-number">1.1.</span> <span class="toc-text">如何理解HTML语义化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9D%97%E7%8A%B6%E5%85%83%E7%B4%A0-amp-%E5%86%85%E8%81%94%E5%85%83%E7%B4%A0"><span class="toc-number">1.2.</span> <span class="toc-text">块状元素 &amp; 内联元素</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E9%9D%A2%E8%AF%95%E9%A2%98"><span class="toc-number">2.</span> <span class="toc-text">CSS面试题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%AE%BD%E5%BA%A6%E8%AE%A1%E7%AE%97"><span class="toc-number">2.1.</span> <span class="toc-text">盒模型宽度计算</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#margin%E7%BA%B5%E5%90%91%E9%87%8D%E5%8F%A0"><span class="toc-number">2.2.</span> <span class="toc-text">margin纵向重叠</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#margin%E8%B4%9F%E5%80%BC%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">2.3.</span> <span class="toc-text">margin负值的问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BFC%E7%9A%84%E7%90%86%E8%A7%A3%E5%92%8C%E5%BA%94%E7%94%A8"><span class="toc-number">2.4.</span> <span class="toc-text">BFC的理解和应用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#float%E5%B8%83%E5%B1%80"><span class="toc-number">2.5.</span> <span class="toc-text">float布局</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80"><span class="toc-number">2.5.1.</span> <span class="toc-text">圣杯布局</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%8C%E9%A3%9E%E7%BF%BC%E5%B8%83%E5%B1%80"><span class="toc-number">2.5.2.</span> <span class="toc-text">双飞翼布局</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%89%8B%E5%86%99clearfix"><span class="toc-number">2.5.3.</span> <span class="toc-text">手写clearfix</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#flex%E5%B8%83%E5%B1%80"><span class="toc-number">2.6.</span> <span class="toc-text">flex布局</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95"><span class="toc-number">2.6.1.</span> <span class="toc-text">常用语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#flex%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E4%B8%89%E7%82%B9%E7%9A%84%E8%89%B2%E5%AD%90"><span class="toc-number">2.6.2.</span> <span class="toc-text">flex实现一个三点的色子</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#css%E5%AE%9A%E4%BD%8D"><span class="toc-number">2.7.</span> <span class="toc-text">css定位</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#absolute%E5%92%8Crelative%E5%AE%9A%E4%BD%8D"><span class="toc-number">2.7.1.</span> <span class="toc-text">absolute和relative定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B1%85%E4%B8%AD%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F"><span class="toc-number">2.7.2.</span> <span class="toc-text">居中对齐方式</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#css-%E5%9B%BE%E6%96%87%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.8.</span> <span class="toc-text">css-图文样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#css-%E5%93%8D%E5%BA%94%E5%BC%8F"><span class="toc-number">2.9.</span> <span class="toc-text">css-响应式</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#rem%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">2.9.1.</span> <span class="toc-text">rem是什么</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F"><span class="toc-number">2.9.2.</span> <span class="toc-text">响应式的实现方式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#vw-vh"><span class="toc-number">2.9.3.</span> <span class="toc-text">vw&#x2F;vh</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript%E9%9D%A2%E8%AF%95%E9%A2%98"><span class="toc-number">3.</span> <span class="toc-text">JavaScript面试题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.1.</span> <span class="toc-text">数据类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%80%BC%E7%B1%BB%E5%9E%8B%E5%92%8C%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.2.</span> <span class="toc-text">值类型和引用类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#typeof%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">3.3.</span> <span class="toc-text">typeof运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D"><span class="toc-number">3.4.</span> <span class="toc-text">深拷贝</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="toc-number">3.5.</span> <span class="toc-text">类型转换</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8B%BC%E6%8E%A5"><span class="toc-number">3.5.1.</span> <span class="toc-text">字符串拼接</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">3.5.2.</span> <span class="toc-text">&#x3D;&#x3D;运算符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#if%E8%AF%AD%E5%8F%A5"><span class="toc-number">3.5.3.</span> <span class="toc-text">if语句</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%BB%E8%BE%91%E5%88%A4%E6%96%AD"><span class="toc-number">3.5.4.</span> <span class="toc-text">逻辑判断</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B%E5%92%8C%E5%8E%9F%E5%9E%8B%E9%93%BE"><span class="toc-number">3.6.</span> <span class="toc-text">原型和原型链</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E9%97%AD%E5%8C%85"><span class="toc-number">3.7.</span> <span class="toc-text">作用域和闭包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#this%E6%8C%87%E5%90%91"><span class="toc-number">3.8.</span> <span class="toc-text">this指向</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E5%92%8C%E5%90%8C%E6%AD%A5"><span class="toc-number">3.9.</span> <span class="toc-text">异步和同步</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Promise"><span class="toc-number">3.9.1.</span> <span class="toc-text">Promise</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#async-await"><span class="toc-number">3.9.2.</span> <span class="toc-text">async&#x2F;await</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#for%E2%80%A6of"><span class="toc-number">3.9.3.</span> <span class="toc-text">for…of</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%8F%E4%BB%BB%E5%8A%A1-%E5%BE%AE%E4%BB%BB%E5%8A%A1"><span class="toc-number">3.9.4.</span> <span class="toc-text">宏任务 微任务</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#event-loop-%E5%92%8C-DOM-%E6%B8%B2%E6%9F%93"><span class="toc-number">3.9.5.</span> <span class="toc-text">event loop 和 DOM 渲染</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DOM"><span class="toc-number">3.10.</span> <span class="toc-text">DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#property%E5%92%8Cattribute"><span class="toc-number">3.10.1.</span> <span class="toc-text">property和attribute</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#DOM%E7%BB%93%E6%9E%84%E6%93%8D%E4%BD%9C"><span class="toc-number">3.10.2.</span> <span class="toc-text">DOM结构操作</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#DOM%E6%80%A7%E8%83%BD"><span class="toc-number">3.10.3.</span> <span class="toc-text">DOM性能</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BOM"><span class="toc-number">3.11.</span> <span class="toc-text">BOM</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#navigator-%E5%92%8C-screen"><span class="toc-number">3.11.1.</span> <span class="toc-text">navigator 和 screen</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#location-%E5%92%8C-history"><span class="toc-number">3.11.2.</span> <span class="toc-text">location 和 history</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ajax"><span class="toc-number">3.12.</span> <span class="toc-text">ajax</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#XMLHttpRequest"><span class="toc-number">3.12.1.</span> <span class="toc-text">XMLHttpRequest</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B7%A8%E5%9F%9F%EF%BC%9A%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5%EF%BC%8C%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-number">3.12.2.</span> <span class="toc-text">跨域：同源策略，跨域解决方案</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%98%E5%82%A8"><span class="toc-number">3.13.</span> <span class="toc-text">存储</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#cookie"><span class="toc-number">3.13.1.</span> <span class="toc-text">cookie</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#localStorage-sessionStorage"><span class="toc-number">3.13.2.</span> <span class="toc-text">localStorage sessionStorage</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTTP%E9%9D%A2%E8%AF%95%E9%A2%98"><span class="toc-number">4.</span> <span class="toc-text">HTTP面试题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-number">4.1.</span> <span class="toc-text">状态码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HTTP-Methods"><span class="toc-number">4.2.</span> <span class="toc-text">HTTP Methods</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Restful-API"><span class="toc-number">4.3.</span> <span class="toc-text">Restful API</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%8D%E4%BD%BF%E7%94%A8url%E5%8F%82%E6%95%B0"><span class="toc-number">4.3.1.</span> <span class="toc-text">不使用url参数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8method%E8%A1%A8%E7%A4%BA%E6%93%8D%E4%BD%9C%E7%B1%BB%E5%9E%8B%EF%BC%88%E4%BC%A0%E7%BB%9FAPI%E8%AE%BE%E8%AE%A1%EF%BC%89"><span class="toc-number">4.3.2.</span> <span class="toc-text">使用method表示操作类型（传统API设计）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8method%E8%A1%A8%E7%A4%BA%E6%93%8D%E4%BD%9C%E7%B1%BB%E5%9E%8B%EF%BC%88Restful-APi%E8%AE%BE%E8%AE%A1%EF%BC%89"><span class="toc-number">4.3.3.</span> <span class="toc-text">使用method表示操作类型（Restful APi设计）</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Headers"><span class="toc-number">4.4.</span> <span class="toc-text">Headers</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Request-Headers"><span class="toc-number">4.4.1.</span> <span class="toc-text">Request Headers</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Response-Headers"><span class="toc-number">4.4.2.</span> <span class="toc-text">Response Headers</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BC%93%E5%AD%98%E7%9B%B8%E5%85%B3-Headers"><span class="toc-number">4.4.3.</span> <span class="toc-text">缓存相关 Headers</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HTTP%E7%BC%93%E5%AD%98"><span class="toc-number">4.5.</span> <span class="toc-text">HTTP缓存</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#linux%E5%91%BD%E4%BB%A4"><span class="toc-number">4.6.</span> <span class="toc-text">linux命令</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83"><span class="toc-number">5.</span> <span class="toc-text">运行环境</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B5%84%E6%BA%90%E7%9A%84%E5%BD%A2%E5%BC%8F"><span class="toc-number">5.1.</span> <span class="toc-text">资源的形式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8A%A0%E8%BD%BD%E8%BF%87%E7%A8%8B"><span class="toc-number">5.2.</span> <span class="toc-text">加载过程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%B2%E6%9F%93%E8%BF%87%E7%A8%8B"><span class="toc-number">5.3.</span> <span class="toc-text">渲染过程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="toc-number">5.4.</span> <span class="toc-text">性能优化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8E%9F%E5%88%99"><span class="toc-number">5.4.1.</span> <span class="toc-text">原则</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%A9%E5%8A%A0%E8%BD%BD%E6%9B%B4%E5%BF%AB"><span class="toc-number">5.4.2.</span> <span class="toc-text">让加载更快</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%A9%E6%B8%B2%E6%9F%93%E6%9B%B4%E5%BF%AB"><span class="toc-number">5.4.3.</span> <span class="toc-text">让渲染更快</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BC%93%E5%AD%98"><span class="toc-number">5.4.4.</span> <span class="toc-text">缓存</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#SSR"><span class="toc-number">5.4.5.</span> <span class="toc-text">SSR</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%98%B2%E6%8A%96"><span class="toc-number">5.4.6.</span> <span class="toc-text">防抖</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%8A%82%E6%B5%81"><span class="toc-number">5.4.7.</span> <span class="toc-text">节流</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E5%85%A8"><span class="toc-number">5.5.</span> <span class="toc-text">安全</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#XSS%E6%94%BB%E5%87%BB"><span class="toc-number">5.5.1.</span> <span class="toc-text">XSS攻击</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#XSS%E9%A2%84%E9%98%B2"><span class="toc-number">5.5.2.</span> <span class="toc-text">XSS预防</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#XSRF%E9%A2%84%E9%98%B2"><span class="toc-number">5.5.3.</span> <span class="toc-text">XSRF预防</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%A2%E8%AF%95%E7%9C%9F%E9%A2%98"><span class="toc-number">6.</span> <span class="toc-text">面试真题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-var-%E5%92%8C-let-const-%E5%8C%BA%E5%88%AB"><span class="toc-number">6.1.</span> <span class="toc-text">1. var 和 let const 区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-typeof%E8%BF%94%E5%9B%9E%E5%93%AA%E4%BA%9B%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.2.</span> <span class="toc-text">2. typeof返回哪些类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%88%97%E4%B8%BE%E5%BC%BA%E5%88%B6%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2%E5%92%8C%E9%9A%90%E5%BC%8F%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="toc-number">6.3.</span> <span class="toc-text">3. 列举强制类型转换和隐式类型转换</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E6%89%8B%E5%86%99%E6%B7%B1%E5%BA%A6%E6%AF%94%E8%BE%83%EF%BC%8C%E6%A8%A1%E6%8B%9F-lodash-isEqual"><span class="toc-number">6.4.</span> <span class="toc-text">4. 手写深度比较，模拟 lodash isEqual</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-split%E5%92%8Cjoin%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">6.5.</span> <span class="toc-text">5. split和join的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E6%95%B0%E7%BB%84%E7%9A%84pop-push-unshift-shift%E5%88%86%E5%88%AB%E5%81%9A%E4%BB%80%E4%B9%88"><span class="toc-number">6.6.</span> <span class="toc-text">6. 数组的pop push unshift shift分别做什么</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E6%95%B0%E7%BB%84%E7%9A%84API%E6%9C%89%E5%93%AA%E4%BA%9B%E6%98%AF%E7%BA%AF%E5%87%BD%E6%95%B0"><span class="toc-number">6.7.</span> <span class="toc-text">7. 数组的API有哪些是纯函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-slice%E5%92%8Csplice%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">6.8.</span> <span class="toc-text">8. slice和splice的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-10-20-30-map-parseInt-%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C"><span class="toc-number">6.9.</span> <span class="toc-text">9. [10,20,30].map(parseInt) 返回结果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-ajax%E8%AF%B7%E6%B1%82get%E5%92%8Cpost%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">6.10.</span> <span class="toc-text">10. ajax请求get和post的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#11-call%E5%92%8Capply%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">6.11.</span> <span class="toc-text">11. call和apply的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86%EF%BC%88%E5%A7%94%E6%89%98%EF%BC%89%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">6.12.</span> <span class="toc-text">12. 事件代理（委托）是什么</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-%E9%97%AD%E5%8C%85%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%E6%9C%89%E4%BD%95%E7%89%B9%E6%80%A7%EF%BC%9F%E6%9C%89%E4%BD%95%E5%BD%B1%E5%93%8D"><span class="toc-number">6.13.</span> <span class="toc-text">13. 闭包是什么？有何特性？有何影响</span></a></li></ol></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index py4">
        
        <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle" itemprop="name headline">
        前端面试复习
    </h1>



    <div class="meta">
      <span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">柯里的语法糖</span>
      </span>
      
    <div class="postdate">
      
        <time datetime="2022-03-16T07:43:07.529Z" itemprop="datePublished">2022-03-16</time>
        
      
    </div>


      
    <div class="article-category">
        <i class="fas fa-archive"></i>
        <a class="category-link" href="/categories/%E9%9D%A2%E8%AF%95/">面试</a>
    </div>


      
    <div class="article-tag">
        <i class="fas fa-tag"></i>
        <a class="tag-link-link" href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a>
    </div>


    </div>
  </header>
  

  <div class="content" itemprop="articleBody">
    <!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

<!-- code_chunk_output -->

<ul>
<li><a href="#html%E9%9D%A2%E8%AF%95%E9%A2%98">HTML面试题</a><ul>
<li><a href="#%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3html%E8%AF%AD%E4%B9%89%E5%8C%96">如何理解HTML语义化</a></li>
<li><a href="#%E5%9D%97%E7%8A%B6%E5%85%83%E7%B4%A0--%E5%86%85%E8%81%94%E5%85%83%E7%B4%A0">块状元素 &amp; 内联元素</a></li>
</ul>
</li>
<li><a href="#css%E9%9D%A2%E8%AF%95%E9%A2%98">CSS面试题</a><ul>
<li><a href="#%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%AE%BD%E5%BA%A6%E8%AE%A1%E7%AE%97">盒模型宽度计算</a></li>
<li><a href="#margin%E7%BA%B5%E5%90%91%E9%87%8D%E5%8F%A0">margin纵向重叠</a></li>
<li><a href="#margin%E8%B4%9F%E5%80%BC%E7%9A%84%E9%97%AE%E9%A2%98">margin负值的问题</a></li>
<li><a href="#bfc%E7%9A%84%E7%90%86%E8%A7%A3%E5%92%8C%E5%BA%94%E7%94%A8">BFC的理解和应用</a></li>
<li><a href="#float%E5%B8%83%E5%B1%80">float布局</a><ul>
<li><a href="#%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80">圣杯布局</a></li>
<li><a href="#%E5%8F%8C%E9%A3%9E%E7%BF%BC%E5%B8%83%E5%B1%80">双飞翼布局</a></li>
<li><a href="#%E6%89%8B%E5%86%99clearfix">手写clearfix</a></li>
</ul>
</li>
<li><a href="#flex%E5%B8%83%E5%B1%80">flex布局</a><ul>
<li><a href="#%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95">常用语法</a></li>
<li><a href="#flex%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E4%B8%89%E7%82%B9%E7%9A%84%E8%89%B2%E5%AD%90">flex实现一个三点的色子</a></li>
</ul>
</li>
<li><a href="#css%E5%AE%9A%E4%BD%8D">css定位</a><ul>
<li><a href="#absolute%E5%92%8Crelative%E5%AE%9A%E4%BD%8D">absolute和relative定位</a></li>
<li><a href="#%E5%B1%85%E4%B8%AD%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F">居中对齐方式</a></li>
</ul>
</li>
<li><a href="#css-%E5%9B%BE%E6%96%87%E6%A0%B7%E5%BC%8F">css-图文样式</a></li>
<li><a href="#css-%E5%93%8D%E5%BA%94%E5%BC%8F">css-响应式</a><ul>
<li><a href="#rem%E6%98%AF%E4%BB%80%E4%B9%88">rem是什么</a></li>
<li><a href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F">响应式的实现方式</a></li>
<li><a href="#vwvh">vw/vh</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#javascript%E9%9D%A2%E8%AF%95%E9%A2%98">JavaScript面试题</a><ul>
<li><a href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B">数据类型</a></li>
<li><a href="#%E5%80%BC%E7%B1%BB%E5%9E%8B%E5%92%8C%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B">值类型和引用类型</a></li>
<li><a href="#typeof%E8%BF%90%E7%AE%97%E7%AC%A6">typeof运算符</a></li>
<li><a href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D">深拷贝</a></li>
<li><a href="#%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2">类型转换</a><ul>
<li><a href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8B%BC%E6%8E%A5">字符串拼接</a></li>
<li><a href="#%E8%BF%90%E7%AE%97%E7%AC%A6">==运算符</a></li>
<li><a href="#if%E8%AF%AD%E5%8F%A5">if语句</a></li>
<li><a href="#%E9%80%BB%E8%BE%91%E5%88%A4%E6%96%AD">逻辑判断</a></li>
</ul>
</li>
<li><a href="#%E5%8E%9F%E5%9E%8B%E5%92%8C%E5%8E%9F%E5%9E%8B%E9%93%BE">原型和原型链</a></li>
<li><a href="#%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E9%97%AD%E5%8C%85">作用域和闭包</a></li>
<li><a href="#this%E6%8C%87%E5%90%91">this指向</a></li>
<li><a href="#%E5%BC%82%E6%AD%A5%E5%92%8C%E5%90%8C%E6%AD%A5">异步和同步</a><ul>
<li><a href="#promise">Promise</a></li>
<li><a href="#asyncawait">async/await</a></li>
<li><a href="#forof">for…of</a></li>
<li><a href="#%E5%AE%8F%E4%BB%BB%E5%8A%A1-%E5%BE%AE%E4%BB%BB%E5%8A%A1">宏任务 微任务</a></li>
<li><a href="#event-loop-%E5%92%8C-dom-%E6%B8%B2%E6%9F%93">event loop 和 DOM 渲染</a></li>
</ul>
</li>
<li><a href="#dom">DOM</a><ul>
<li><a href="#property%E5%92%8Cattribute">property和attribute</a></li>
<li><a href="#dom%E7%BB%93%E6%9E%84%E6%93%8D%E4%BD%9C">DOM结构操作</a></li>
<li><a href="#dom%E6%80%A7%E8%83%BD">DOM性能</a></li>
</ul>
</li>
<li><a href="#bom">BOM</a><ul>
<li><a href="#navigator-%E5%92%8C-screen">navigator 和 screen</a></li>
<li><a href="#location-%E5%92%8C-history">location 和 history</a></li>
</ul>
</li>
<li><a href="#ajax">ajax</a><ul>
<li><a href="#xmlhttprequest">XMLHttpRequest</a></li>
<li><a href="#%E8%B7%A8%E5%9F%9F%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88">跨域：同源策略，跨域解决方案</a></li>
</ul>
</li>
<li><a href="#%E5%AD%98%E5%82%A8">存储</a><ul>
<li><a href="#cookie">cookie</a></li>
<li><a href="#localstorage-sessionstorage">localStorage sessionStorage</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#http%E9%9D%A2%E8%AF%95%E9%A2%98">HTTP面试题</a><ul>
<li><a href="#%E7%8A%B6%E6%80%81%E7%A0%81">状态码</a></li>
<li><a href="#http-methods">HTTP Methods</a></li>
<li><a href="#restful-api">Restful API</a><ul>
<li><a href="#%E4%B8%8D%E4%BD%BF%E7%94%A8url%E5%8F%82%E6%95%B0">不使用url参数</a></li>
<li><a href="#%E4%BD%BF%E7%94%A8method%E8%A1%A8%E7%A4%BA%E6%93%8D%E4%BD%9C%E7%B1%BB%E5%9E%8B%E4%BC%A0%E7%BB%9Fapi%E8%AE%BE%E8%AE%A1">使用method表示操作类型（传统API设计）</a></li>
<li><a href="#%E4%BD%BF%E7%94%A8method%E8%A1%A8%E7%A4%BA%E6%93%8D%E4%BD%9C%E7%B1%BB%E5%9E%8Brestful-api%E8%AE%BE%E8%AE%A1">使用method表示操作类型（Restful APi设计）</a></li>
</ul>
</li>
<li><a href="#headers">Headers</a><ul>
<li><a href="#request-headers">Request Headers</a></li>
<li><a href="#response-headers">Response Headers</a></li>
<li><a href="#%E7%BC%93%E5%AD%98%E7%9B%B8%E5%85%B3-headers">缓存相关 Headers</a></li>
</ul>
</li>
<li><a href="#http%E7%BC%93%E5%AD%98">HTTP缓存</a></li>
<li><a href="#linux%E5%91%BD%E4%BB%A4">linux命令</a></li>
</ul>
</li>
<li><a href="#%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83">运行环境</a><ul>
<li><a href="#%E8%B5%84%E6%BA%90%E7%9A%84%E5%BD%A2%E5%BC%8F">资源的形式</a></li>
<li><a href="#%E5%8A%A0%E8%BD%BD%E8%BF%87%E7%A8%8B">加载过程</a></li>
<li><a href="#%E6%B8%B2%E6%9F%93%E8%BF%87%E7%A8%8B">渲染过程</a></li>
<li><a href="#%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96">性能优化</a><ul>
<li><a href="#%E5%8E%9F%E5%88%99">原则</a></li>
<li><a href="#%E8%AE%A9%E5%8A%A0%E8%BD%BD%E6%9B%B4%E5%BF%AB">让加载更快</a></li>
<li><a href="#%E8%AE%A9%E6%B8%B2%E6%9F%93%E6%9B%B4%E5%BF%AB">让渲染更快</a></li>
<li><a href="#%E7%BC%93%E5%AD%98">缓存</a></li>
<li><a href="#ssr">SSR</a></li>
<li><a href="#%E9%98%B2%E6%8A%96">防抖</a></li>
<li><a href="#%E8%8A%82%E6%B5%81">节流</a></li>
</ul>
</li>
<li><a href="#%E5%AE%89%E5%85%A8">安全</a><ul>
<li><a href="#xss%E6%94%BB%E5%87%BB">XSS攻击</a></li>
<li><a href="#xss%E9%A2%84%E9%98%B2">XSS预防</a></li>
<li><a href="#xsrf%E9%A2%84%E9%98%B2">XSRF预防</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#%E9%9D%A2%E8%AF%95%E7%9C%9F%E9%A2%98">面试真题</a><ul>
<li><a href="#1-var-%E5%92%8C-let-const-%E5%8C%BA%E5%88%AB">1. var 和 let const 区别</a></li>
<li><a href="#2-typeof%E8%BF%94%E5%9B%9E%E5%93%AA%E4%BA%9B%E7%B1%BB%E5%9E%8B">2. typeof返回哪些类型</a></li>
<li><a href="#3-%E5%88%97%E4%B8%BE%E5%BC%BA%E5%88%B6%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2%E5%92%8C%E9%9A%90%E5%BC%8F%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2">3. 列举强制类型转换和隐式类型转换</a></li>
<li><a href="#4-%E6%89%8B%E5%86%99%E6%B7%B1%E5%BA%A6%E6%AF%94%E8%BE%83%E6%A8%A1%E6%8B%9F-lodash-isequal">4. 手写深度比较，模拟 lodash isEqual</a></li>
<li><a href="#5-split%E5%92%8Cjoin%E7%9A%84%E5%8C%BA%E5%88%AB">5. split和join的区别</a></li>
<li><a href="#6-%E6%95%B0%E7%BB%84%E7%9A%84pop-push-unshift-shift%E5%88%86%E5%88%AB%E5%81%9A%E4%BB%80%E4%B9%88">6. 数组的pop push unshift shift分别做什么</a></li>
<li><a href="#7-%E6%95%B0%E7%BB%84%E7%9A%84api%E6%9C%89%E5%93%AA%E4%BA%9B%E6%98%AF%E7%BA%AF%E5%87%BD%E6%95%B0">7. 数组的API有哪些是纯函数</a></li>
<li><a href="#8-slice%E5%92%8Csplice%E7%9A%84%E5%8C%BA%E5%88%AB">8. slice和splice的区别</a></li>
<li><a href="#9-102030mapparseint-%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C">9. [10,20,30].map(parseInt) 返回结果</a></li>
<li><a href="#10-ajax%E8%AF%B7%E6%B1%82get%E5%92%8Cpost%E7%9A%84%E5%8C%BA%E5%88%AB">10. ajax请求get和post的区别</a></li>
<li><a href="#11-call%E5%92%8Capply%E7%9A%84%E5%8C%BA%E5%88%AB">11. call和apply的区别</a></li>
<li><a href="#12-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86%E5%A7%94%E6%89%98%E6%98%AF%E4%BB%80%E4%B9%88">12. 事件代理（委托）是什么</a></li>
<li><a href="#13-%E9%97%AD%E5%8C%85%E6%98%AF%E4%BB%80%E4%B9%88%E6%9C%89%E4%BD%95%E7%89%B9%E6%80%A7%E6%9C%89%E4%BD%95%E5%BD%B1%E5%93%8D">13. 闭包是什么？有何特性？有何影响</a></li>
</ul>
</li>
</ul>
<!-- /code_chunk_output -->

<h2 id="HTML面试题"><a href="#HTML面试题" class="headerlink" title="HTML面试题"></a>HTML面试题</h2><h3 id="如何理解HTML语义化"><a href="#如何理解HTML语义化" class="headerlink" title="如何理解HTML语义化"></a>如何理解HTML语义化</h3><ul>
<li>让人更容易读懂（增加代码可读性）</li>
<li>让搜索引擎更容易读懂（SEO）</li>
</ul>
<h3 id="块状元素-amp-内联元素"><a href="#块状元素-amp-内联元素" class="headerlink" title="块状元素 &amp; 内联元素"></a>块状元素 &amp; 内联元素</h3><ul>
<li>display:block/table; 有 div h1 h2 table ul li ol p 等</li>
<li>display:inline/inline-block; 有 span img input button 等</li>
</ul>
<h2 id="CSS面试题"><a href="#CSS面试题" class="headerlink" title="CSS面试题"></a>CSS面试题</h2><h3 id="盒模型宽度计算"><a href="#盒模型宽度计算" class="headerlink" title="盒模型宽度计算"></a>盒模型宽度计算</h3><p>如下代码，请问box1的offsetWidth是多大</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">  <span class="selector-id">#box1</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>:<span class="number">100px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">padding</span>:<span class="number">10px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#ccc</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">margin</span>:<span class="number">10px</span></span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box1&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>答案是122</p>
<ul>
<li>offsetWidth = (content + 内边距 + 边框),无外边距</li>
<li>box-sizing: border-box; width生效与offsetWidth，而不是内容(content)宽度</li>
</ul>
<h3 id="margin纵向重叠"><a href="#margin纵向重叠" class="headerlink" title="margin纵向重叠"></a>margin纵向重叠</h3><p>如下代码，AAA 和 BBB 之间的距离是多少</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">  <span class="selector-tag">p</span>&#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">font-size</span>:<span class="number">16px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">line-height</span>:<span class="number">1</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">margin-top</span>:<span class="number">10px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">margin-bottom</span>:<span class="number">15px</span>;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>AAA<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>BBB<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>相邻元素的margin-top和margin-bottom会发生重叠</li>
<li>空白内容的p标签也会重叠</li>
</ul>
<h3 id="margin负值的问题"><a href="#margin负值的问题" class="headerlink" title="margin负值的问题"></a>margin负值的问题</h3><ul>
<li>margin-top 和 margin-left 为负值，元素向上或向左移动</li>
<li>margin-right 为负值，右侧元素左移，自身不受影响</li>
<li>margin-bottom 为负值，下方元素上移，自身不受影响</li>
</ul>
<h3 id="BFC的理解和应用"><a href="#BFC的理解和应用" class="headerlink" title="BFC的理解和应用"></a>BFC的理解和应用</h3><ul>
<li>BFC：Block format context，块级格式化上下文</li>
<li>一块独立渲染区域，内部元素的渲染不会影响边界以外的元素</li>
</ul>
<p>形成BFC的条件：</p>
<ul>
<li>float为none</li>
<li>position为absolute或fixed</li>
<li>overflow不是visible</li>
<li>display是flex inline-block等</li>
</ul>
<h3 id="float布局"><a href="#float布局" class="headerlink" title="float布局"></a>float布局</h3><p>圣杯布局和双飞翼布局的技术总结：</p>
<ul>
<li>使用float布局</li>
<li>两侧使用margin负值，以便和中间内容横向重叠</li>
<li>防止中间内容被两侧覆盖，一个用padding，一个用margin</li>
</ul>
<h4 id="圣杯布局"><a href="#圣杯布局" class="headerlink" title="圣杯布局"></a>圣杯布局</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">  <span class="selector-id">#header</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="number">#f1f1f1</span>;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">  <span class="selector-id">#container</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">padding-left</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">padding-right</span>: <span class="number">150px</span>;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">  <span class="selector-id">#container</span> <span class="selector-class">.column</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">  <span class="selector-id">#center</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="number">#ccc</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">  <span class="selector-id">#left</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: yellow;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">margin-left</span>: -<span class="number">100%</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">right</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">  <span class="selector-id">#right</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: red;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">150px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">margin-right</span>: -<span class="number">150px</span>;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">  <span class="selector-id">#footer</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">clear</span>:both;</span></span><br><span class="line"><span class="css">    <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="number">#f1f1f1</span>;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;header&quot;</span>&gt;</span>this is header<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;container&quot;</span> <span class="attr">class</span>=<span class="string">&quot;clearfix&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;center&quot;</span> <span class="attr">class</span>=<span class="string">&quot;column&quot;</span>&gt;</span>this is center<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;left&quot;</span> <span class="attr">class</span>=<span class="string">&quot;column&quot;</span>&gt;</span>this is left<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;right&quot;</span> <span class="attr">class</span>=<span class="string">&quot;column&quot;</span>&gt;</span>this is right<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;footer&quot;</span>&gt;</span>this is footer<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="双飞翼布局"><a href="#双飞翼布局" class="headerlink" title="双飞翼布局"></a>双飞翼布局</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">  <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-tag">body</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">min-width</span>: <span class="number">550px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.col</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-id">#main</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">background-color</span>: <span class="number">#ccc</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-id">#main-wrap</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">margin</span>: <span class="number">0</span> <span class="number">190px</span> <span class="number">0</span> <span class="number">190px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-id">#left</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">width</span>: <span class="number">190px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">background-color</span>: <span class="number">#0000ff</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">margin-left</span>: -<span class="number">100%</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-id">#right</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">width</span>: <span class="number">190px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">background-color</span>: <span class="number">#ff0000</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">margin-left</span>: -<span class="number">190px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;main&quot;</span> <span class="attr">class</span>=<span class="string">&quot;col&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;main-wrap&quot;</span>&gt;</span>this is main<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;left&quot;</span> <span class="attr">class</span>=<span class="string">&quot;col&quot;</span>&gt;</span>this is left<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;right&quot;</span> <span class="attr">class</span>=<span class="string">&quot;col&quot;</span>&gt;</span>this is right<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="手写clearfix"><a href="#手写clearfix" class="headerlink" title="手写clearfix"></a>手写clearfix</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span>:after &#123;</span><br><span class="line">  content: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">  <span class="attribute">display</span>: table;</span><br><span class="line">  <span class="attribute">clear</span>: both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="flex布局"><a href="#flex布局" class="headerlink" title="flex布局"></a>flex布局</h3><h4 id="常用语法"><a href="#常用语法" class="headerlink" title="常用语法"></a>常用语法</h4><ul>
<li>flex-direction</li>
<li>justify-content</li>
<li>align-items</li>
<li>flex-wrap</li>
<li>align-self</li>
</ul>
<h4 id="flex实现一个三点的色子"><a href="#flex实现一个三点的色子" class="headerlink" title="flex实现一个三点的色子"></a>flex实现一个三点的色子</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">  <span class="selector-class">.box</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#ccc</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">    <span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="css">    <span class="attribute">justify-content</span>: space-between;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.item</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">display</span>: block;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">height</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="number">#666</span>;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.item</span><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>) &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">align-self</span>: center;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.item</span><span class="selector-pseudo">:nth-child</span>(<span class="number">3</span>) &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">align-self</span>: flex-end;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="css定位"><a href="#css定位" class="headerlink" title="css定位"></a>css定位</h3><h4 id="absolute和relative定位"><a href="#absolute和relative定位" class="headerlink" title="absolute和relative定位"></a>absolute和relative定位</h4><ul>
<li>relative依据自身定位</li>
<li>absolute依据最近一层的定位元素（position不为static）来定位</li>
</ul>
<h4 id="居中对齐方式"><a href="#居中对齐方式" class="headerlink" title="居中对齐方式"></a>居中对齐方式</h4><p>水平居中：</p>
<ul>
<li>inline元素: text-align:center</li>
<li>block元素: margin:auto</li>
<li>absolute元素: left:50%+margin-left负值</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line">  <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.container</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">margin</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">padding</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.item</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">background-color</span>: <span class="number">#ccc</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.container-1</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.container-2</span> <span class="selector-class">.item</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">margin</span>: auto;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.container-3</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="css">      <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.container-3</span> <span class="selector-class">.item</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">      <span class="attribute">left</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">margin-left</span>: -<span class="number">150px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container container-1&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>一段文字<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container container-2&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>this is block item<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container container-3&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>this is absolute item<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>垂直居中：</p>
<ul>
<li>inline元素: line-height的值等于height值</li>
<li>absolute元素: top:50%+margin-top负值</li>
<li>absolute元素: transform(-50%,-50%)</li>
<li>absolute元素: top,left,right,bottom=0+margin:auto</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line">  <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.container</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">margin</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">padding</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.item</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">background-color</span>: <span class="number">#ccc</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.container-1</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">      <span class="attribute">line-height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.container-2</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.container-2</span> <span class="selector-class">.item</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">      <span class="attribute">left</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">margin-left</span>: -<span class="number">150px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">top</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">margin-top</span>: -<span class="number">50px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.container-3</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.container-3</span> <span class="selector-class">.item</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">height</span>: <span class="number">80px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">      <span class="attribute">left</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">top</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.container-4</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.container-4</span> <span class="selector-class">.item</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">height</span>: <span class="number">50px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">      <span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">left</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">bottom</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">right</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">margin</span>: auto;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container container-1&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>一段文字<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container container-2&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>this is item<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container container-3&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>this is item<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;container container-4&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item&quot;</span>&gt;</span>this is item<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="css-图文样式"><a href="#css-图文样式" class="headerlink" title="css-图文样式"></a>css-图文样式</h3><p>line-height如何继承:</p>
<ul>
<li>写具体数值，如30px，则继承该值</li>
<li>写比例，如2或者1.5，则继承该比例: font-size的值×比例</li>
<li>写百分比，如200%，则继承计算出来的值</li>
</ul>
<h3 id="css-响应式"><a href="#css-响应式" class="headerlink" title="css-响应式"></a>css-响应式</h3><h4 id="rem是什么"><a href="#rem是什么" class="headerlink" title="rem是什么"></a>rem是什么</h4><p>rem是一个长度单位</p>
<ul>
<li>px，绝对长度单位，最常用</li>
<li>em，相对长度单位，相对于父元素，不常用</li>
<li>rem，相对长度单位，相对于根元素，常用于响应式布局，font-size:100px为1rem</li>
</ul>
<h4 id="响应式的实现方式"><a href="#响应式的实现方式" class="headerlink" title="响应式的实现方式"></a>响应式的实现方式</h4><ul>
<li>media-query,根据不同的屏幕宽度设置根元素 font-size</li>
<li>rem，基于根元素的相对单位</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">374px</span>) &#123;</span><br><span class="line">    <span class="comment">/* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */</span></span><br><span class="line">    <span class="selector-tag">html</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">86px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">375px</span>) <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">413px</span>) &#123;</span><br><span class="line">    <span class="comment">/* iphone6/7/8 和 iphone x */</span></span><br><span class="line">    <span class="selector-tag">html</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">100px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@media</span> <span class="keyword">only</span> screen <span class="keyword">and</span> (<span class="attribute">min-width</span>: <span class="number">414px</span>) &#123;</span><br><span class="line">    <span class="comment">/* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */</span></span><br><span class="line">    <span class="selector-tag">html</span> &#123;</span><br><span class="line">        <span class="attribute">font-size</span>: <span class="number">110px</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="vw-vh"><a href="#vw-vh" class="headerlink" title="vw/vh"></a>vw/vh</h4><p>rem的弊端：”阶梯“性，一个范围内的font-size是不会更改的</p>
<p>网页视口尺寸：</p>
<ul>
<li>window.screen.height  屏幕高度</li>
<li>window.innerHeight  网页视口高度</li>
<li>document.body.clientHeight  body高度</li>
</ul>
<p>vw/vh</p>
<ul>
<li>vh 网页视口高度的1/100</li>
<li>vw 网页视口宽度的1/100</li>
<li>vmax取两者(vh和vw)的最大值，vmin取两者的最小值</li>
</ul>
<h2 id="JavaScript面试题"><a href="#JavaScript面试题" class="headerlink" title="JavaScript面试题"></a>JavaScript面试题</h2><h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><p>JavaScript的数据类型有：Number Boolean String Undefined Null Symbol BigInt Object</p>
<p>基本数据类型有 Number Boolean String Undefined Symbol BigInt</p>
<p>引用数据类型有 Object Null</p>
<h3 id="值类型和引用类型"><a href="#值类型和引用类型" class="headerlink" title="值类型和引用类型"></a>值类型和引用类型</h3><p>值类型存储在栈中，引用类型存储在堆中，保存的是内存地址</p>
<h3 id="typeof运算符"><a href="#typeof运算符" class="headerlink" title="typeof运算符"></a>typeof运算符</h3><p>能判断值类型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">typeof</span> <span class="number">123</span> <span class="comment">// number</span></span><br></pre></td></tr></table></figure>

<p>能判断函数类型</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">typeof</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125; <span class="comment">// function</span></span><br></pre></td></tr></table></figure>

<p>能识别引用类型（不能继续识别）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">typeof</span> <span class="literal">null</span> <span class="comment">// Object</span></span><br><span class="line"><span class="keyword">typeof</span> [<span class="string">&#x27;a&#x27;</span>,<span class="string">&#x27;b&#x27;</span>] <span class="comment">// Object</span></span><br><span class="line"><span class="keyword">typeof</span> &#123; <span class="attr">a</span>: <span class="string">&#x27;1&#x27;</span> &#125; <span class="comment">// Object</span></span><br></pre></td></tr></table></figure>

<h3 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">deepClone</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> obj !== <span class="string">&quot;object&quot;</span> || obj === <span class="literal">null</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> obj;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 初始化</span></span><br><span class="line">  <span class="keyword">let</span> result;</span><br><span class="line">  <span class="keyword">if</span> (obj <span class="keyword">instanceof</span> <span class="built_in">Array</span>) &#123;</span><br><span class="line">    result = [];</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    result = &#123;&#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 处理</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> obj) &#123;</span><br><span class="line">    <span class="keyword">if</span> (obj.hasOwnProperty(key)) &#123;</span><br><span class="line">      result[key] = deepClone(obj[key]);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 返回</span></span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h3><h4 id="字符串拼接"><a href="#字符串拼接" class="headerlink" title="字符串拼接"></a>字符串拼接</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a = <span class="number">100</span> + <span class="string">&#x27;10&#x27;</span> <span class="comment">// 10010</span></span><br><span class="line"><span class="keyword">const</span> b = <span class="literal">true</span> + <span class="string">&#x27;10&#x27;</span> <span class="comment">// true10</span></span><br></pre></td></tr></table></figure>

<h4 id="运算符"><a href="#运算符" class="headerlink" title="==运算符"></a>==运算符</h4><p>==运算符会作隐式类型转换</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">100</span> == <span class="string">&#x27;100&#x27;</span> <span class="comment">// true</span></span><br><span class="line"><span class="number">0</span> == <span class="string">&#x27;true&#x27;</span> <span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<p>何时使用===：除了null之外  ，其他一律用===</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123; <span class="attr">x</span>:<span class="number">100</span> &#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(obj.a == <span class="literal">null</span>) &#123;&#125;</span><br><span class="line"><span class="comment">// 相当于</span></span><br><span class="line"><span class="keyword">if</span>(obj.a === <span class="literal">null</span> || obj.a === <span class="literal">undefined</span>) &#123;&#125;</span><br></pre></td></tr></table></figure>

<h4 id="if语句"><a href="#if语句" class="headerlink" title="if语句"></a>if语句</h4><ul>
<li>truly变量: !!a === true 的变量</li>
<li>falsely变量: !!a === false 的变量</li>
</ul>
<p>以下是falsely变量，除此之外都是truly变量</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">!!<span class="number">0</span> === <span class="literal">false</span></span><br><span class="line">!!<span class="literal">NaN</span> === <span class="literal">false</span></span><br><span class="line">!!<span class="string">&#x27;&#x27;</span> === <span class="literal">false</span></span><br><span class="line">!!<span class="literal">false</span> === <span class="literal">false</span></span><br><span class="line">!!<span class="literal">undefined</span> === <span class="literal">false</span></span><br><span class="line">!!<span class="literal">null</span> === <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<p>if语句判断的是truly变量或者是falsely变量</p>
<h4 id="逻辑判断"><a href="#逻辑判断" class="headerlink" title="逻辑判断"></a>逻辑判断</h4><p>逻辑判断也是判断的truly变量或者是falsely变量</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> &amp;&amp; <span class="number">10</span>) <span class="comment">// 0</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&#x27;&#x27;</span> || <span class="string">&#x27;abc&#x27;</span>) <span class="comment">// abc</span></span><br></pre></td></tr></table></figure>

<h3 id="原型和原型链"><a href="#原型和原型链" class="headerlink" title="原型和原型链"></a>原型和原型链</h3><ul>
<li><a href="/2021/10/11/JavaScript/oop/">面向对象</a></li>
</ul>
<h3 id="作用域和闭包"><a href="#作用域和闭包" class="headerlink" title="作用域和闭包"></a>作用域和闭包</h3><ul>
<li><a href="/2021/11/10/JavaScript/scope/">运行原理和作用域</a></li>
<li><a href="/2021/11/12/JavaScript/closure/">闭包</a></li>
</ul>
<h3 id="this指向"><a href="#this指向" class="headerlink" title="this指向"></a>this指向</h3><ul>
<li><a href="/2021/11/15/JavaScript/this/">this指向</a></li>
<li><a href="/2021/11/20/JavaScript/call-apply-bind/">手写call、apply、bind</a></li>
<li><a href="/2021/11/01/JavaScript/arrayLike">类数组</a></li>
</ul>
<h3 id="异步和同步"><a href="#异步和同步" class="headerlink" title="异步和同步"></a>异步和同步</h3><ul>
<li><p><a href="/2021/12/18/JavaScript/eventLoop">事件循环</a></p>
</li>
<li><p>js是单线程语言</p>
</li>
<li><p>异步不会阻塞代码执行</p>
</li>
<li><p>同步会阻塞代码执行</p>
</li>
</ul>
<h4 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h4><ul>
<li>三种状态</li>
<li>then catch</li>
<li>常用API</li>
</ul>
<h4 id="async-await"><a href="#async-await" class="headerlink" title="async/await"></a>async/await</h4><p>和Promise的关系：</p>
<ul>
<li>async 函数返回结果都是 Promise 对象（如果函数内没返回 Promise ，则自动封装一下）</li>
<li>await 后面跟 Promise 对象：会阻断后续代码，等待状态变为 resolved ，才获取结果并继续执行</li>
<li>await 后续跟非 Promise 对象：会直接返回</li>
<li>try…catch 捕获 rejected 状态</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">(<span class="keyword">async</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> p4 = <span class="built_in">Promise</span>.reject(<span class="string">&#x27;some err&#x27;</span>)</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> res = <span class="keyword">await</span> p4</span><br><span class="line">    <span class="built_in">console</span>.log(res)</span><br><span class="line">  &#125; <span class="keyword">catch</span> (ex) &#123;</span><br><span class="line">    <span class="built_in">console</span>.error(ex)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<p>面试题:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">async1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;async1 start&quot;</span>);</span><br><span class="line">  <span class="keyword">await</span> async2();</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;async1 end&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">async2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;async2&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;script start&quot;</span>);</span><br><span class="line">async1();</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;script end&quot;</span>);</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">async1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;async1 start&quot;</span>);</span><br><span class="line">  <span class="keyword">await</span> async2();</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;async1 end&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">async2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;async2&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;script start&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;setTimeout&quot;</span>);</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line">async1();</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span> (<span class="params">resolve</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;promise1&quot;</span>);</span><br><span class="line">  resolve();</span><br><span class="line">&#125;).then(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;promise2&quot;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">&quot;script end&quot;</span>);</span><br></pre></td></tr></table></figure>

<h4 id="for…of"><a href="#for…of" class="headerlink" title="for…of"></a>for…of</h4><ul>
<li>for in 是常规的同步遍历</li>
<li>for of 常用于异步的遍历</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">muti</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      resolve(num * num);</span><br><span class="line">    &#125;, <span class="number">1000</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> nums = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">demo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i <span class="keyword">of</span> nums) &#123;</span><br><span class="line">    <span class="keyword">const</span> res = <span class="keyword">await</span> muti(i);</span><br><span class="line">    <span class="built_in">console</span>.log(res);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">demo();</span><br></pre></td></tr></table></figure>

<h4 id="宏任务-微任务"><a href="#宏任务-微任务" class="headerlink" title="宏任务 微任务"></a>宏任务 微任务</h4><p>宏任务：setTimeout, setInterval, Ajax, DOM事件<br>微任务：Promise async/await</p>
<p>区别：</p>
<ul>
<li>宏任务：DOM渲染后触发，如setTimeout</li>
<li>微任务：DOM渲染前触发，如Promise</li>
</ul>
<h4 id="event-loop-和-DOM-渲染"><a href="#event-loop-和-DOM-渲染" class="headerlink" title="event loop 和 DOM 渲染"></a>event loop 和 DOM 渲染</h4><ul>
<li>每次Call Stack清空，即同步任务执行完，都是DOM重新渲染的机会，DOM结构如有改变则会重新渲染</li>
<li>然后再去触发下一次 event loop</li>
</ul>
<p>为什么?</p>
<ul>
<li>微任务是ES6语法规定的</li>
<li>宏任务是由浏览器规定的</li>
</ul>
<p>过程：</p>
<ol>
<li>call stack清空</li>
<li>执行当前微任务</li>
<li>尝试DOM渲染</li>
<li>触发event loop</li>
</ol>
<h3 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h3><h4 id="property和attribute"><a href="#property和attribute" class="headerlink" title="property和attribute"></a>property和attribute</h4><ul>
<li>property：修改对象的属性，不会体现到html结构中</li>
<li>attribute：修改html属性，会改变html结构</li>
<li>两者都有可能引起DOM重新渲染</li>
</ul>
<h4 id="DOM结构操作"><a href="#DOM结构操作" class="headerlink" title="DOM结构操作"></a>DOM结构操作</h4><ul>
<li><p>新增/插入节点</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> div1 = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;div1&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> p1 = <span class="built_in">document</span>.createElement(<span class="string">&#x27;p&#x27;</span>)</span><br><span class="line">p1.innerHTML = <span class="string">&#x27;this is p1&#x27;</span></span><br><span class="line">div1.appendChild(p1)</span><br></pre></td></tr></table></figure></li>
<li><p>删除节点</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> div1 = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;div1&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> child = div1.childNodes</span><br><span class="line">div.removeChild(child[<span class="number">0</span>])</span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="DOM性能"><a href="#DOM性能" class="headerlink" title="DOM性能"></a>DOM性能</h4><ul>
<li><p>DOM操作非常昂贵，避免频繁的DOM操作</p>
</li>
<li><p>对DOM查询做缓存</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不缓存DOM查询结果</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;p&quot;</span>).length; i++) &#123;</span><br><span class="line">  <span class="comment">// 每次循环都会计算length 频繁进行DOM查询</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 缓存DOM查询结果</span></span><br><span class="line"><span class="keyword">const</span> pList = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;p&quot;</span>);</span><br><span class="line"><span class="keyword">const</span> length = pList.length;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; length; i++) &#123;</span><br><span class="line">  <span class="comment">// 缓存length 只进行一次DOM查询</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>将频繁操作改为一次性操作</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> list = <span class="built_in">document</span>.getElementById(<span class="string">&quot;list&quot;</span>);</span><br><span class="line"><span class="comment">// 创建一个文档片段，此时没有插入到DOM结构中</span></span><br><span class="line"><span class="keyword">const</span> frag = <span class="built_in">document</span>.createDocumentFragment();</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</span><br><span class="line">  <span class="keyword">const</span> li = <span class="built_in">document</span>.createElement(<span class="string">&quot;li&quot;</span>);</span><br><span class="line">  li.innerHTML = <span class="string">`List item <span class="subst">$&#123;i&#125;</span>`</span>;</span><br><span class="line">  <span class="comment">// 先插入到文档片段中</span></span><br><span class="line">  frag.appendChild(li);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 都完成之后，再插入到DOM结构中</span></span><br><span class="line">list.appendChild(frag);</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="BOM"><a href="#BOM" class="headerlink" title="BOM"></a>BOM</h3><h4 id="navigator-和-screen"><a href="#navigator-和-screen" class="headerlink" title="navigator 和 screen"></a>navigator 和 screen</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// navigator</span></span><br><span class="line"><span class="keyword">const</span> ua = navigator.userAgent </span><br><span class="line"><span class="keyword">const</span> isChrome = ua.indexOf(<span class="string">&#x27;Chrome&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// screen</span></span><br><span class="line"><span class="built_in">console</span>.log(screen.width)</span><br></pre></td></tr></table></figure>

<h4 id="location-和-history"><a href="#location-和-history" class="headerlink" title="location 和 history"></a>location 和 history</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// location</span></span><br><span class="line">location.href</span><br><span class="line">location.protocol</span><br><span class="line">location.host</span><br><span class="line">location.pathname</span><br><span class="line">location.search</span><br><span class="line">location.hash</span><br><span class="line"></span><br><span class="line"><span class="comment">// history</span></span><br><span class="line">history.back()</span><br><span class="line">history.forward()</span><br></pre></td></tr></table></figure>

<h3 id="ajax"><a href="#ajax" class="headerlink" title="ajax"></a>ajax</h3><h4 id="XMLHttpRequest"><a href="#XMLHttpRequest" class="headerlink" title="XMLHttpRequest"></a>XMLHttpRequest</h4>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// GET请求</span></span><br><span class="line"><span class="keyword">const</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line">xhr.open(<span class="string">&quot;GET&quot;</span>, <span class="string">&quot;./db.json&quot;</span>, <span class="literal">true</span>);</span><br><span class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (xhr.readyState === <span class="number">4</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (xhr.status === <span class="number">200</span>) &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="built_in">JSON</span>.parse(xhr.responseText));</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">xhr.send(<span class="literal">null</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// POST请求</span></span><br><span class="line"><span class="keyword">const</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line">xhr.open(<span class="string">&quot;POST&quot;</span>, <span class="string">&quot;login&quot;</span>, <span class="literal">true</span>);</span><br><span class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (xhr.readyState === <span class="number">4</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (xhr.status === <span class="number">200</span>) &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="built_in">JSON</span>.parse(xhr.responseText));</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">const</span> postData = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;curry&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>: <span class="number">33</span></span><br><span class="line">&#125;</span><br><span class="line">xhr.send(<span class="built_in">JSON</span>.stringify(postData));</span><br></pre></td></tr></table></figure>

<p>xhr.readyState:</p>
<ul>
<li>0：未初始化，还没有调用send方法</li>
<li>1：已调用send方法，正在发送请求</li>
<li>2：send方法执行完成，已经接收到全部响应内容</li>
<li>3：正在解析响应内容</li>
<li>4：响应内容解析完成，可以在客户端调用</li>
</ul>
<p>xhr.status</p>
<ul>
<li>2xx：表示成功处理请求</li>
<li>3xx：需重定向</li>
<li>4xx：客户端请求错误</li>
<li>5xx：服务端错误</li>
</ul>
<h4 id="跨域：同源策略，跨域解决方案"><a href="#跨域：同源策略，跨域解决方案" class="headerlink" title="跨域：同源策略，跨域解决方案"></a>跨域：同源策略，跨域解决方案</h4><p>同源策略：</p>
<ul>
<li>ajax请求时，<strong>浏览器</strong>要求当前网页和server必须同源</li>
<li>同源策略：协议、域名、端口，三者必须一致</li>
</ul>
<p>加载图片 css js 可无视跨域请求：</p>
<ul>
<li><code>&lt;img /&gt;</code>可用于统计打点，可使用第三方统计服务</li>
<li><code>&lt;link /&gt; &lt;script/&gt;</code>可以使用CDN</li>
<li><code>&lt;script&gt;</code>可实现JSONP</li>
</ul>
<p>跨域：</p>
<ul>
<li>所有的跨域，都必须经过server端允许和配合</li>
<li>未经server端允许就实现跨域，说明浏览器有漏洞</li>
</ul>
<p>JSONP：</p>
<ul>
<li><p>服务器可以任意动态拼接数据返回，只要符合html格式要求</p>
</li>
<li><p><code>&lt;script&gt;</code> 可以跨域</p>
</li>
<li><p>所以，<code>&lt;script&gt;</code>可以获得跨域的数据，只要服务端愿意返回</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="built_in">window</span>.callback = <span class="function"><span class="keyword">function</span> (<span class="params">data</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(data);</span></span><br><span class="line"><span class="javascript">  &#125;;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;http://localhost:8000/jsonp.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<p>CORS：服务器设置http header</p>
<p><code>Access-Control-Origin: *</code></p>
<h3 id="存储"><a href="#存储" class="headerlink" title="存储"></a>存储</h3><h4 id="cookie"><a href="#cookie" class="headerlink" title="cookie"></a>cookie</h4><ul>
<li>本身用于浏览器和服务器通讯</li>
<li>被“借用”到本地存储来</li>
<li>可用 <code>document.cookie = &#39;...&#39;</code>来修改</li>
</ul>
<p>缺点：</p>
<ul>
<li>存储大小，最大4kb</li>
<li>http请求时需要发送到服务端，增加请求数据量</li>
<li>只能用<code>document.cookie = &#39;...&#39;</code>来修改，太过简陋</li>
</ul>
<h4 id="localStorage-sessionStorage"><a href="#localStorage-sessionStorage" class="headerlink" title="localStorage sessionStorage"></a>localStorage sessionStorage</h4><ul>
<li>HTML5专门为存储而设计，最大可存5M</li>
<li>API简单易用 setItem getItem</li>
<li>不会随着http请求发送出去</li>
</ul>
<p>区别：</p>
<ul>
<li>localStorage数据永久存储，除非代码或手动删除</li>
<li>sessionStorage数据只存在于当前会话，浏览器关闭则清空</li>
<li>一般用localStorage会多一些</li>
</ul>
<h2 id="HTTP面试题"><a href="#HTTP面试题" class="headerlink" title="HTTP面试题"></a>HTTP面试题</h2><p><a href="/2022/02/28/network/http/">http总结</a></p>
<h3 id="状态码"><a href="#状态码" class="headerlink" title="状态码"></a>状态码</h3><p>状态码分类：</p>
<ul>
<li>1xx：服务器收到请求</li>
<li>2xx：请求成功</li>
<li>3xx：重定向</li>
<li>4xx：客户端错误</li>
<li>5xx：服务器错误</li>
</ul>
<p>常见状态码：</p>
<ul>
<li>200：成功</li>
<li>301：永久重定向（配合location，浏览器自动处理）</li>
<li>302：临时重定向（配合location，浏览器自动处理）</li>
<li>304：资源未被修改</li>
<li>404：资源未找到</li>
<li>403：没有权限</li>
<li>500：服务器错误</li>
<li>504：网关超时</li>
</ul>
<h3 id="HTTP-Methods"><a href="#HTTP-Methods" class="headerlink" title="HTTP Methods"></a>HTTP Methods</h3><p>传统的methods：</p>
<ul>
<li>get 获取服务器的数据</li>
<li>post 向服务器提交数据</li>
</ul>
<p>现在的methods：</p>
<ul>
<li>get 获取数据</li>
<li>post 新建数据</li>
<li>patch/put 更新数据</li>
<li>delete 删除数据</li>
</ul>
<h3 id="Restful-API"><a href="#Restful-API" class="headerlink" title="Restful API"></a>Restful API</h3><ul>
<li>一种新的API设计方法（早已推广使用）</li>
<li>传统API设计：把每个url当作一个功能</li>
<li>Restful API设计：把每个url当作一个唯一的资源</li>
</ul>
<p>如何设计成一个资源：</p>
<ul>
<li>尽量不使用url参数</li>
<li>用method表示操作类型</li>
</ul>
<h4 id="不使用url参数"><a href="#不使用url参数" class="headerlink" title="不使用url参数"></a>不使用url参数</h4><ul>
<li>传统API设计：/api/list?pageIndex=2</li>
<li>Restful API设计：/api/list/2</li>
</ul>
<h4 id="使用method表示操作类型（传统API设计）"><a href="#使用method表示操作类型（传统API设计）" class="headerlink" title="使用method表示操作类型（传统API设计）"></a>使用method表示操作类型（传统API设计）</h4><ul>
<li>post请求 /api/create-blog</li>
<li>post请求 /api/update-blog?id=100</li>
<li>get请求 /api/get-blog?id=100</li>
</ul>
<h4 id="使用method表示操作类型（Restful-APi设计）"><a href="#使用method表示操作类型（Restful-APi设计）" class="headerlink" title="使用method表示操作类型（Restful APi设计）"></a>使用method表示操作类型（Restful APi设计）</h4><ul>
<li>post请求 /api/blog</li>
<li>patch请求 /api/blog/100</li>
<li>get请求 /api/blog/100</li>
</ul>
<h3 id="Headers"><a href="#Headers" class="headerlink" title="Headers"></a>Headers</h3><h4 id="Request-Headers"><a href="#Request-Headers" class="headerlink" title="Request Headers"></a>Request Headers</h4><ul>
<li>Accept 浏览器可接收的数据格式</li>
<li>Accept-Encoding 浏览器可接收的压缩算法，如 gzip</li>
<li>Accept-Language 浏览器可接收的语言：如 zh-CN</li>
<li>Connection：keep-alive 一次TCP连接重复使用</li>
<li>cookie</li>
<li>Host</li>
<li>User-Agent 浏览器信息</li>
<li>Content-type 发送数据的格式，如 application/json</li>
</ul>
<h4 id="Response-Headers"><a href="#Response-Headers" class="headerlink" title="Response Headers"></a>Response Headers</h4><ul>
<li>Content-type 返回数据的格式，如 application/json</li>
<li>Content-length 返回数据的大小，多少字节</li>
<li>Content-Encoding 返回数据的压缩算法，如 gzip</li>
<li>Set-Cookie</li>
</ul>
<h4 id="缓存相关-Headers"><a href="#缓存相关-Headers" class="headerlink" title="缓存相关 Headers"></a>缓存相关 Headers</h4><ul>
<li>Cache-Control Expires</li>
<li>Last-Modified If-Modified-Since</li>
<li>Etag If-None-Match</li>
</ul>
<h3 id="HTTP缓存"><a href="#HTTP缓存" class="headerlink" title="HTTP缓存"></a>HTTP缓存</h3><p><a href="/2022/02/11/frontend/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98/">浏览器缓存总结</a></p>
<h3 id="linux命令"><a href="#linux命令" class="headerlink" title="linux命令"></a>linux命令</h3><p>使用ssh连接服务器</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh work@192.168.10.21(主机名)</span><br></pre></td></tr></table></figure>

<p>删除文件夹</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">rm -rf 文件夹名</span><br></pre></td></tr></table></figure>

<p>修改文件名</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mv file newFile</span><br></pre></td></tr></table></figure>

<p>移动文件</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mv file ../xxx</span><br></pre></td></tr></table></figure>

<p>复制文件</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cp a.js a1.js</span><br></pre></td></tr></table></figure>

<p>新建文件</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">touch file</span><br></pre></td></tr></table></figure>

<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vi file</span><br></pre></td></tr></table></figure>

<h2 id="运行环境"><a href="#运行环境" class="headerlink" title="运行环境"></a>运行环境</h2><h3 id="资源的形式"><a href="#资源的形式" class="headerlink" title="资源的形式"></a>资源的形式</h3><ul>
<li>html文件</li>
<li>媒体文件</li>
<li>js css</li>
</ul>
<h3 id="加载过程"><a href="#加载过程" class="headerlink" title="加载过程"></a>加载过程</h3><ul>
<li>DNS解析：域名 -&gt; IP地址</li>
<li>浏览器根据IP地址向服务器发起http请求</li>
<li>服务器处理http请求，并返回给浏览器</li>
</ul>
<h3 id="渲染过程"><a href="#渲染过程" class="headerlink" title="渲染过程"></a>渲染过程</h3><ul>
<li>根据html代码生成DOM Tree</li>
<li>根据css代码生成CSSOM</li>
<li>将DOM Tree 和 CSSOM整合形成 Render Tree</li>
<li>根据 Render Tree 渲染页面</li>
<li>遇到 <code>&lt;script&gt;</code>则暂停渲染，优先加载并执行JS代码，完成再继续</li>
<li>直至把Render Tree渲染完成</li>
</ul>
<p>window.onload 和 DOMContentLoaded</p>
<ul>
<li>window.onload 页面的全部资源加载完才会执行，包括图片，视频等</li>
<li>DOMContentLoaded DOM渲染完即可执行，此时图片、视频可能还没有加载完</li>
</ul>
<h3 id="性能优化"><a href="#性能优化" class="headerlink" title="性能优化"></a>性能优化</h3><h4 id="原则"><a href="#原则" class="headerlink" title="原则"></a>原则</h4><ul>
<li>多使用内存、缓存或其他方法</li>
<li>减少CPU计算量，减少网络加载耗时</li>
<li>空间换时间</li>
</ul>
<h4 id="让加载更快"><a href="#让加载更快" class="headerlink" title="让加载更快"></a>让加载更快</h4><ul>
<li>减少资源体积：压缩代码</li>
<li>减少访问次数：合并代码，SSR服务端渲染，缓存</li>
<li>使用更快的网络：CDN</li>
</ul>
<h4 id="让渲染更快"><a href="#让渲染更快" class="headerlink" title="让渲染更快"></a>让渲染更快</h4><ul>
<li>css放在head，js放在body最下面</li>
<li>尽早开始执行js，用DOMContentLoaded触发</li>
<li>懒加载（图片懒加载，上滑加载更多）</li>
<li>对DOM查询进行缓存</li>
<li>避免频繁DOM操作，合并到一起插入DOM结构</li>
<li>节流和防抖</li>
</ul>
<h4 id="缓存"><a href="#缓存" class="headerlink" title="缓存"></a>缓存</h4><ul>
<li>静态资源加hash后缀，根据文件内容计算hash</li>
<li>文件内容不变，则hash不变，则url不变</li>
<li>url和文件不变，则会自动触发http缓存机制，返回304</li>
</ul>
<h4 id="SSR"><a href="#SSR" class="headerlink" title="SSR"></a>SSR</h4><ul>
<li>服务端渲染：将网页和数据一起加载，一起渲染</li>
<li>非SSR：先加载网页，再加载数据，再渲染数据</li>
</ul>
<h4 id="防抖"><a href="#防抖" class="headerlink" title="防抖"></a>防抖</h4><ul>
<li>监听一个输入框的，文字变化后触发change事件</li>
<li>直接用keyup事件，则会频繁触发change事件</li>
<li>防抖：用户输入结束或暂停时，才会触发change事件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span>(<span class="params">fn, delay = <span class="number">500</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timer = <span class="literal">null</span>;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timer) &#123;</span><br><span class="line">      <span class="built_in">clearTimeout</span>(timer);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    timer = <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      fn.apply(<span class="built_in">this</span>, <span class="built_in">arguments</span>);</span><br><span class="line">    &#125;, delay);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="节流"><a href="#节流" class="headerlink" title="节流"></a>节流</h4><ul>
<li>拖拽一个元素时，要随时拿到该元素被拖拽的位置</li>
<li>直接用drag事件，则会频繁触发，很容易导致卡顿</li>
<li>节流：无论拖拽速度多块，都会每隔100ms触发一次</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">throttle</span>(<span class="params">fn, delay = <span class="number">500</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timer = <span class="literal">null</span>;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timer) &#123;</span><br><span class="line">      <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">let</span> timer = <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      fn.apply(<span class="built_in">this</span>, <span class="built_in">arguments</span>);</span><br><span class="line">    &#125;, delay);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="安全"><a href="#安全" class="headerlink" title="安全"></a>安全</h3><ul>
<li>XSS 跨站请求攻击</li>
<li>XSRF 跨站请求伪造</li>
</ul>
<h4 id="XSS攻击"><a href="#XSS攻击" class="headerlink" title="XSS攻击"></a>XSS攻击</h4><ul>
<li>一个博客网站，我发表一篇博客，其中嵌入<code>&lt;script&gt;</code>脚本</li>
<li>脚本内容：获取cookie，发送到我的服务器（服务器配合跨域）</li>
<li>发布这篇博客，有人查看它，我轻松收割访问者的cookie</li>
</ul>
<h4 id="XSS预防"><a href="#XSS预防" class="headerlink" title="XSS预防"></a>XSS预防</h4><ul>
<li>替换特殊字符，如 &lt; 变为 &lt; &gt; 变为 &gt;</li>
<li><code>&lt;script&gt;</code>变为&lt;script&gt;，直接显示，而不会作为脚本执行</li>
<li>前端要替换，后端也要替换，都做总不会有错</li>
</ul>
<h4 id="XSRF预防"><a href="#XSRF预防" class="headerlink" title="XSRF预防"></a>XSRF预防</h4><ul>
<li>使用post接口</li>
<li>增加验证，例如密码、短信验证码、指纹等</li>
</ul>
<h2 id="面试真题"><a href="#面试真题" class="headerlink" title="面试真题"></a>面试真题</h2><h3 id="1-var-和-let-const-区别"><a href="#1-var-和-let-const-区别" class="headerlink" title="1. var 和 let const 区别"></a>1. var 和 let const 区别</h3><ul>
<li>var是ES5语法，let cosnt是ES6语法；var有变量提升</li>
<li>var 和 let是变量，可修改；const是常量，不可修改；</li>
<li>let const 有块级作用域，var没有</li>
</ul>
<h3 id="2-typeof返回哪些类型"><a href="#2-typeof返回哪些类型" class="headerlink" title="2. typeof返回哪些类型"></a>2. typeof返回哪些类型</h3><ul>
<li>undefined string number boolean symbol</li>
<li>object (typeof null === ‘object’)</li>
<li>function</li>
</ul>
<h3 id="3-列举强制类型转换和隐式类型转换"><a href="#3-列举强制类型转换和隐式类型转换" class="headerlink" title="3. 列举强制类型转换和隐式类型转换"></a>3. 列举强制类型转换和隐式类型转换</h3><ul>
<li>强制：parseInt toString等</li>
<li>隐式：if、逻辑运算、==、+拼接字符串</li>
</ul>
<h3 id="4-手写深度比较，模拟-lodash-isEqual"><a href="#4-手写深度比较，模拟-lodash-isEqual" class="headerlink" title="4. 手写深度比较，模拟 lodash isEqual"></a>4. 手写深度比较，模拟 lodash isEqual</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isObject</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">typeof</span> obj === <span class="string">&quot;object&quot;</span> &amp;&amp; obj !== <span class="literal">null</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isEqual</span>(<span class="params">obj1, obj2</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (!isObject(obj1) || !isObject(obj2)) &#123;</span><br><span class="line">    <span class="keyword">return</span> obj1 === obj2;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (obj1 === obj2) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 两个都是引用类型，而且不相等</span></span><br><span class="line">  <span class="comment">// 1.先取出obj1和obj2的keys，比较个数</span></span><br><span class="line">  <span class="keyword">const</span> obj1Keys = <span class="built_in">Object</span>.keys(obj1);</span><br><span class="line">  <span class="keyword">const</span> obj2Keys = <span class="built_in">Object</span>.keys(obj2);</span><br><span class="line">  <span class="keyword">if</span> (obj1Keys.length !== obj2Keys.length) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 2.以obj1为基准，和obj2一次递归比较</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> obj1) &#123;</span><br><span class="line">    <span class="comment">// 比较当前key的value</span></span><br><span class="line">    <span class="keyword">const</span> res = isEqual(obj1[key], obj2[key]);</span><br><span class="line">    <span class="keyword">if</span> (!res) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 3. 全相等</span></span><br><span class="line">  <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="5-split和join的区别"><a href="#5-split和join的区别" class="headerlink" title="5. split和join的区别"></a>5. split和join的区别</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&#x27;1-2-3&#x27;</span>.split(<span class="string">&#x27;-&#x27;</span>)</span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].join(<span class="string">&#x27;-&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h3 id="6-数组的pop-push-unshift-shift分别做什么"><a href="#6-数组的pop-push-unshift-shift分别做什么" class="headerlink" title="6. 数组的pop push unshift shift分别做什么"></a>6. 数组的pop push unshift shift分别做什么</h3><ul>
<li>功能</li>
<li>返回值</li>
<li>是否会对原数组造成影响</li>
</ul>
<h3 id="7-数组的API有哪些是纯函数"><a href="#7-数组的API有哪些是纯函数" class="headerlink" title="7. 数组的API有哪些是纯函数"></a>7. 数组的API有哪些是纯函数</h3><ul>
<li>concat</li>
<li>map</li>
<li>filter</li>
<li>slice</li>
</ul>
<h3 id="8-slice和splice的区别"><a href="#8-slice和splice的区别" class="headerlink" title="8. slice和splice的区别"></a>8. slice和splice的区别</h3><ul>
<li>功能区别</li>
<li>参数和返回值</li>
<li>是否是纯函数</li>
</ul>
<h3 id="9-10-20-30-map-parseInt-返回结果"><a href="#9-10-20-30-map-parseInt-返回结果" class="headerlink" title="9. [10,20,30].map(parseInt) 返回结果"></a>9. [10,20,30].map(parseInt) 返回结果</h3><ul>
<li>map的参数和返回值</li>
<li>parseInt的参数和返回值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 拆解</span></span><br><span class="line">[<span class="number">10</span>, <span class="number">20</span>, <span class="number">30</span>].map(<span class="function">(<span class="params">num, index</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">parseInt</span>(num, index)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="10-ajax请求get和post的区别"><a href="#10-ajax请求get和post的区别" class="headerlink" title="10. ajax请求get和post的区别"></a>10. ajax请求get和post的区别</h3><ul>
<li>get一般用于查询操作，post一般用于提交操作</li>
<li>get参数拼接在url上，post放在请求体内</li>
<li>安全性：post易于防止CSRF</li>
</ul>
<h3 id="11-call和apply的区别"><a href="#11-call和apply的区别" class="headerlink" title="11. call和apply的区别"></a>11. call和apply的区别</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">fn.call(<span class="built_in">this</span>, p1, p2, p3)</span><br><span class="line">fn.apply(<span class="built_in">this</span>, <span class="built_in">arguments</span>)</span><br></pre></td></tr></table></figure>

<h3 id="12-事件代理（委托）是什么"><a href="#12-事件代理（委托）是什么" class="headerlink" title="12. 事件代理（委托）是什么"></a>12. 事件代理（委托）是什么</h3><p>事件冒泡</p>
<h3 id="13-闭包是什么？有何特性？有何影响"><a href="#13-闭包是什么？有何特性？有何影响" class="headerlink" title="13. 闭包是什么？有何特性？有何影响"></a>13. 闭包是什么？有何特性？有何影响</h3><ul>
<li>作用域和自由变量</li>
<li>应用场景：作为参数被传入，作为返回值被返回</li>
<li>影响：变量会常驻内存，得不到释放</li>
</ul>

  </div>
</article>



        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
         
          <li><a href="/">首页</a></li>
         
          <li><a href="/tags/">标签</a></li>
         
          <li><a href="/categories/">分类</a></li>
         
          <li><a href="/archives/">归档</a></li>
         
          <li><a target="_blank" rel="noopener" href="http://github.com/twitzz">项目</a></li>
         
          <li><a href="/about/">关于</a></li>
         
          <li><a href="/search/">搜索</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E9%9D%A2%E8%AF%95%E9%A2%98"><span class="toc-number">1.</span> <span class="toc-text">HTML面试题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3HTML%E8%AF%AD%E4%B9%89%E5%8C%96"><span class="toc-number">1.1.</span> <span class="toc-text">如何理解HTML语义化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9D%97%E7%8A%B6%E5%85%83%E7%B4%A0-amp-%E5%86%85%E8%81%94%E5%85%83%E7%B4%A0"><span class="toc-number">1.2.</span> <span class="toc-text">块状元素 &amp; 内联元素</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E9%9D%A2%E8%AF%95%E9%A2%98"><span class="toc-number">2.</span> <span class="toc-text">CSS面试题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%AE%BD%E5%BA%A6%E8%AE%A1%E7%AE%97"><span class="toc-number">2.1.</span> <span class="toc-text">盒模型宽度计算</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#margin%E7%BA%B5%E5%90%91%E9%87%8D%E5%8F%A0"><span class="toc-number">2.2.</span> <span class="toc-text">margin纵向重叠</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#margin%E8%B4%9F%E5%80%BC%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">2.3.</span> <span class="toc-text">margin负值的问题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BFC%E7%9A%84%E7%90%86%E8%A7%A3%E5%92%8C%E5%BA%94%E7%94%A8"><span class="toc-number">2.4.</span> <span class="toc-text">BFC的理解和应用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#float%E5%B8%83%E5%B1%80"><span class="toc-number">2.5.</span> <span class="toc-text">float布局</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80"><span class="toc-number">2.5.1.</span> <span class="toc-text">圣杯布局</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%8C%E9%A3%9E%E7%BF%BC%E5%B8%83%E5%B1%80"><span class="toc-number">2.5.2.</span> <span class="toc-text">双飞翼布局</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%89%8B%E5%86%99clearfix"><span class="toc-number">2.5.3.</span> <span class="toc-text">手写clearfix</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#flex%E5%B8%83%E5%B1%80"><span class="toc-number">2.6.</span> <span class="toc-text">flex布局</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95"><span class="toc-number">2.6.1.</span> <span class="toc-text">常用语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#flex%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E4%B8%89%E7%82%B9%E7%9A%84%E8%89%B2%E5%AD%90"><span class="toc-number">2.6.2.</span> <span class="toc-text">flex实现一个三点的色子</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#css%E5%AE%9A%E4%BD%8D"><span class="toc-number">2.7.</span> <span class="toc-text">css定位</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#absolute%E5%92%8Crelative%E5%AE%9A%E4%BD%8D"><span class="toc-number">2.7.1.</span> <span class="toc-text">absolute和relative定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B1%85%E4%B8%AD%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F"><span class="toc-number">2.7.2.</span> <span class="toc-text">居中对齐方式</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#css-%E5%9B%BE%E6%96%87%E6%A0%B7%E5%BC%8F"><span class="toc-number">2.8.</span> <span class="toc-text">css-图文样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#css-%E5%93%8D%E5%BA%94%E5%BC%8F"><span class="toc-number">2.9.</span> <span class="toc-text">css-响应式</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#rem%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">2.9.1.</span> <span class="toc-text">rem是什么</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F"><span class="toc-number">2.9.2.</span> <span class="toc-text">响应式的实现方式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#vw-vh"><span class="toc-number">2.9.3.</span> <span class="toc-text">vw&#x2F;vh</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript%E9%9D%A2%E8%AF%95%E9%A2%98"><span class="toc-number">3.</span> <span class="toc-text">JavaScript面试题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.1.</span> <span class="toc-text">数据类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%80%BC%E7%B1%BB%E5%9E%8B%E5%92%8C%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.2.</span> <span class="toc-text">值类型和引用类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#typeof%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">3.3.</span> <span class="toc-text">typeof运算符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%B1%E6%8B%B7%E8%B4%9D"><span class="toc-number">3.4.</span> <span class="toc-text">深拷贝</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="toc-number">3.5.</span> <span class="toc-text">类型转换</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%8B%BC%E6%8E%A5"><span class="toc-number">3.5.1.</span> <span class="toc-text">字符串拼接</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">3.5.2.</span> <span class="toc-text">&#x3D;&#x3D;运算符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#if%E8%AF%AD%E5%8F%A5"><span class="toc-number">3.5.3.</span> <span class="toc-text">if语句</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%80%BB%E8%BE%91%E5%88%A4%E6%96%AD"><span class="toc-number">3.5.4.</span> <span class="toc-text">逻辑判断</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B%E5%92%8C%E5%8E%9F%E5%9E%8B%E9%93%BE"><span class="toc-number">3.6.</span> <span class="toc-text">原型和原型链</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E9%97%AD%E5%8C%85"><span class="toc-number">3.7.</span> <span class="toc-text">作用域和闭包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#this%E6%8C%87%E5%90%91"><span class="toc-number">3.8.</span> <span class="toc-text">this指向</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E5%92%8C%E5%90%8C%E6%AD%A5"><span class="toc-number">3.9.</span> <span class="toc-text">异步和同步</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Promise"><span class="toc-number">3.9.1.</span> <span class="toc-text">Promise</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#async-await"><span class="toc-number">3.9.2.</span> <span class="toc-text">async&#x2F;await</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#for%E2%80%A6of"><span class="toc-number">3.9.3.</span> <span class="toc-text">for…of</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%8F%E4%BB%BB%E5%8A%A1-%E5%BE%AE%E4%BB%BB%E5%8A%A1"><span class="toc-number">3.9.4.</span> <span class="toc-text">宏任务 微任务</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#event-loop-%E5%92%8C-DOM-%E6%B8%B2%E6%9F%93"><span class="toc-number">3.9.5.</span> <span class="toc-text">event loop 和 DOM 渲染</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DOM"><span class="toc-number">3.10.</span> <span class="toc-text">DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#property%E5%92%8Cattribute"><span class="toc-number">3.10.1.</span> <span class="toc-text">property和attribute</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#DOM%E7%BB%93%E6%9E%84%E6%93%8D%E4%BD%9C"><span class="toc-number">3.10.2.</span> <span class="toc-text">DOM结构操作</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#DOM%E6%80%A7%E8%83%BD"><span class="toc-number">3.10.3.</span> <span class="toc-text">DOM性能</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BOM"><span class="toc-number">3.11.</span> <span class="toc-text">BOM</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#navigator-%E5%92%8C-screen"><span class="toc-number">3.11.1.</span> <span class="toc-text">navigator 和 screen</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#location-%E5%92%8C-history"><span class="toc-number">3.11.2.</span> <span class="toc-text">location 和 history</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ajax"><span class="toc-number">3.12.</span> <span class="toc-text">ajax</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#XMLHttpRequest"><span class="toc-number">3.12.1.</span> <span class="toc-text">XMLHttpRequest</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%B7%A8%E5%9F%9F%EF%BC%9A%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5%EF%BC%8C%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="toc-number">3.12.2.</span> <span class="toc-text">跨域：同源策略，跨域解决方案</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%98%E5%82%A8"><span class="toc-number">3.13.</span> <span class="toc-text">存储</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#cookie"><span class="toc-number">3.13.1.</span> <span class="toc-text">cookie</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#localStorage-sessionStorage"><span class="toc-number">3.13.2.</span> <span class="toc-text">localStorage sessionStorage</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTTP%E9%9D%A2%E8%AF%95%E9%A2%98"><span class="toc-number">4.</span> <span class="toc-text">HTTP面试题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-number">4.1.</span> <span class="toc-text">状态码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HTTP-Methods"><span class="toc-number">4.2.</span> <span class="toc-text">HTTP Methods</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Restful-API"><span class="toc-number">4.3.</span> <span class="toc-text">Restful API</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%8D%E4%BD%BF%E7%94%A8url%E5%8F%82%E6%95%B0"><span class="toc-number">4.3.1.</span> <span class="toc-text">不使用url参数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8method%E8%A1%A8%E7%A4%BA%E6%93%8D%E4%BD%9C%E7%B1%BB%E5%9E%8B%EF%BC%88%E4%BC%A0%E7%BB%9FAPI%E8%AE%BE%E8%AE%A1%EF%BC%89"><span class="toc-number">4.3.2.</span> <span class="toc-text">使用method表示操作类型（传统API设计）</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8method%E8%A1%A8%E7%A4%BA%E6%93%8D%E4%BD%9C%E7%B1%BB%E5%9E%8B%EF%BC%88Restful-APi%E8%AE%BE%E8%AE%A1%EF%BC%89"><span class="toc-number">4.3.3.</span> <span class="toc-text">使用method表示操作类型（Restful APi设计）</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Headers"><span class="toc-number">4.4.</span> <span class="toc-text">Headers</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Request-Headers"><span class="toc-number">4.4.1.</span> <span class="toc-text">Request Headers</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Response-Headers"><span class="toc-number">4.4.2.</span> <span class="toc-text">Response Headers</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BC%93%E5%AD%98%E7%9B%B8%E5%85%B3-Headers"><span class="toc-number">4.4.3.</span> <span class="toc-text">缓存相关 Headers</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HTTP%E7%BC%93%E5%AD%98"><span class="toc-number">4.5.</span> <span class="toc-text">HTTP缓存</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#linux%E5%91%BD%E4%BB%A4"><span class="toc-number">4.6.</span> <span class="toc-text">linux命令</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83"><span class="toc-number">5.</span> <span class="toc-text">运行环境</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B5%84%E6%BA%90%E7%9A%84%E5%BD%A2%E5%BC%8F"><span class="toc-number">5.1.</span> <span class="toc-text">资源的形式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8A%A0%E8%BD%BD%E8%BF%87%E7%A8%8B"><span class="toc-number">5.2.</span> <span class="toc-text">加载过程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%B2%E6%9F%93%E8%BF%87%E7%A8%8B"><span class="toc-number">5.3.</span> <span class="toc-text">渲染过程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><span class="toc-number">5.4.</span> <span class="toc-text">性能优化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8E%9F%E5%88%99"><span class="toc-number">5.4.1.</span> <span class="toc-text">原则</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%A9%E5%8A%A0%E8%BD%BD%E6%9B%B4%E5%BF%AB"><span class="toc-number">5.4.2.</span> <span class="toc-text">让加载更快</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AE%A9%E6%B8%B2%E6%9F%93%E6%9B%B4%E5%BF%AB"><span class="toc-number">5.4.3.</span> <span class="toc-text">让渲染更快</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BC%93%E5%AD%98"><span class="toc-number">5.4.4.</span> <span class="toc-text">缓存</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#SSR"><span class="toc-number">5.4.5.</span> <span class="toc-text">SSR</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%98%B2%E6%8A%96"><span class="toc-number">5.4.6.</span> <span class="toc-text">防抖</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%8A%82%E6%B5%81"><span class="toc-number">5.4.7.</span> <span class="toc-text">节流</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E5%85%A8"><span class="toc-number">5.5.</span> <span class="toc-text">安全</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#XSS%E6%94%BB%E5%87%BB"><span class="toc-number">5.5.1.</span> <span class="toc-text">XSS攻击</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#XSS%E9%A2%84%E9%98%B2"><span class="toc-number">5.5.2.</span> <span class="toc-text">XSS预防</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#XSRF%E9%A2%84%E9%98%B2"><span class="toc-number">5.5.3.</span> <span class="toc-text">XSRF预防</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%A2%E8%AF%95%E7%9C%9F%E9%A2%98"><span class="toc-number">6.</span> <span class="toc-text">面试真题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-var-%E5%92%8C-let-const-%E5%8C%BA%E5%88%AB"><span class="toc-number">6.1.</span> <span class="toc-text">1. var 和 let const 区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-typeof%E8%BF%94%E5%9B%9E%E5%93%AA%E4%BA%9B%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.2.</span> <span class="toc-text">2. typeof返回哪些类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%88%97%E4%B8%BE%E5%BC%BA%E5%88%B6%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2%E5%92%8C%E9%9A%90%E5%BC%8F%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2"><span class="toc-number">6.3.</span> <span class="toc-text">3. 列举强制类型转换和隐式类型转换</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E6%89%8B%E5%86%99%E6%B7%B1%E5%BA%A6%E6%AF%94%E8%BE%83%EF%BC%8C%E6%A8%A1%E6%8B%9F-lodash-isEqual"><span class="toc-number">6.4.</span> <span class="toc-text">4. 手写深度比较，模拟 lodash isEqual</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-split%E5%92%8Cjoin%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">6.5.</span> <span class="toc-text">5. split和join的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E6%95%B0%E7%BB%84%E7%9A%84pop-push-unshift-shift%E5%88%86%E5%88%AB%E5%81%9A%E4%BB%80%E4%B9%88"><span class="toc-number">6.6.</span> <span class="toc-text">6. 数组的pop push unshift shift分别做什么</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E6%95%B0%E7%BB%84%E7%9A%84API%E6%9C%89%E5%93%AA%E4%BA%9B%E6%98%AF%E7%BA%AF%E5%87%BD%E6%95%B0"><span class="toc-number">6.7.</span> <span class="toc-text">7. 数组的API有哪些是纯函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-slice%E5%92%8Csplice%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">6.8.</span> <span class="toc-text">8. slice和splice的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-10-20-30-map-parseInt-%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C"><span class="toc-number">6.9.</span> <span class="toc-text">9. [10,20,30].map(parseInt) 返回结果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-ajax%E8%AF%B7%E6%B1%82get%E5%92%8Cpost%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">6.10.</span> <span class="toc-text">10. ajax请求get和post的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#11-call%E5%92%8Capply%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">6.11.</span> <span class="toc-text">11. call和apply的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-%E4%BA%8B%E4%BB%B6%E4%BB%A3%E7%90%86%EF%BC%88%E5%A7%94%E6%89%98%EF%BC%89%E6%98%AF%E4%BB%80%E4%B9%88"><span class="toc-number">6.12.</span> <span class="toc-text">12. 事件代理（委托）是什么</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-%E9%97%AD%E5%8C%85%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%E6%9C%89%E4%BD%95%E7%89%B9%E6%80%A7%EF%BC%9F%E6%9C%89%E4%BD%95%E5%BD%B1%E5%93%8D"><span class="toc-number">6.13.</span> <span class="toc-text">13. 闭包是什么？有何特性？有何影响</span></a></li></ol></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&text=前端面试复习"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&title=前端面试复习"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&is_video=false&description=前端面试复习"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=前端面试复习&body=Check out this article: https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/"><i class="fas fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&title=前端面试复习"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&title=前端面试复习"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&title=前端面试复习"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&title=前端面试复习"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&name=前端面试复习&description="><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://danyuan30.gitee.io/2022/03/16/frontend/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E5%A4%8D%E4%B9%A0/&t=前端面试复习"><i class="fab fa-hacker-news fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fas fa-bars fa-lg" aria-hidden="true"></i> 菜单</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fas fa-list fa-lg" aria-hidden="true"></i> 目录</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> 分享</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> 返回顶部</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
  <div class="footer-left">
    Copyright &copy;
    
    
    2021-2022
    柯里的语法糖
  </div>
  <div class="footer-right">
    <nav>
      <ul>
        <!--
       --><li><a href="/">首页</a></li><!--
     --><!--
       --><li><a href="/tags/">标签</a></li><!--
     --><!--
       --><li><a href="/categories/">分类</a></li><!--
     --><!--
       --><li><a href="/archives/">归档</a></li><!--
     --><!--
       --><li><a target="_blank" rel="noopener" href="http://github.com/twitzz">项目</a></li><!--
     --><!--
       --><li><a href="/about/">关于</a></li><!--
     --><!--
       --><li><a href="/search/">搜索</a></li><!--
     -->
      </ul>
    </nav>
  </div>
</footer>

    </div>
    <!-- styles -->



  <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'"/>


    <!-- jquery -->
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> 




<!-- clipboard -->

  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js" crossorigin="anonymous"></script> 
  
  <script type="text/javascript">
  $(function() {
    // copy-btn HTML
    var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"复制到粘贴板!\">";
    btn += '<i class="far fa-clone"></i>';
    btn += '</span>'; 
    // mount it!
    $(".highlight table").before(btn);
    var clip = new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str,it)=>str+it.innerText+'\n','')
      }
    });
    clip.on('success', function(e) {
      e.trigger.setAttribute('aria-label', "复制成功!");
      e.clearSelection();
    })
  })
  </script>


<script src="/js/main.js"></script>

<!-- search -->

<!-- Google Analytics -->

<!-- Baidu Analytics -->

<!-- Cloudflare Analytics -->

<!-- Umami Analytics -->

<!-- Disqus Comments -->

<!-- utterances Comments -->

</body>
</html>
